<html>

<title>Asteroids</title>

<!-- JS -->
<script src='scripts/jquery.min.js'></script>
<script src='scripts/page.js'></script>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style/index.css">
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">

<!-- HTML -->
<body>
  <div class='outer-container'>
      <div class='game-window'>
        <audio id="audio" src=""></audio>
        <!-- Main Menu -->
        <div id="main_menu">
          <div class="main_menu_header">
            <img src="./src/asteroid.png" class="header_log">
            <span class="header_title">Asteroids</span>
            <img src="./src/asteroid.png" class="header_log">
          </div>
          <div class="main_two_buttons">
            <button id="playGame_btn">Play game!</button>
            <button id="main_setting_btn">Setting</button>
          </div>
        </div>
        <!-- Game Over -->
        <div id="game_over">
          <div class="main_menu_header">
            <img src="./src/asteroid.png" class="header_log">
            <span class="header_title">Asteroids</span>
            <img src="./src/asteroid.png" class="header_log">
          </div>
          <div class="game_over_content">
            <div class="center_box">
              <p>GAME OVER!</p>
              <p>YOU HAVE TO FIX YOUR SPACESHIP!</p>
              <p id="game_over_score">0</p>
              <button id="start_over_btn">Start Over</button>
            </div>
          </div>
        </div>
        <!-- Settings -->
        <div id="settings">
          <div class="m-40 fs-strong">Settings</div>
          <div class="fs-strong">Volume: <span id="volume_num">50</span></div>
          <div class="slidecontainer">
            <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
          </div>
          <div class="fs-strong">Difficuly</div>
          <div id="difficuly_btn">
            <button class="easy">Easy</button>
            <button class="norm active">Normal</button>
            <button class="hard">Hard</button>
          </div>
          <button class="close_btn">Close</button>
        </div>
        <!-- Tutorial -->
        <div id="tutorial">
          <div class="fs-strong title">How to play</div>
          <div><span class="fs-strong">Avoid </span><em> asteroids!</em></div>
          <img src="./src/asteroid.png">
          <div>
            <span class="fs-strong">Collect</span>
            <em>shields!</em>
            <span class="fs-strong">Travel</span>
            <span>through</span>
            <em>portals</em>
            <span>to the next level!</span>
          </div>
          <div>
            <img src="./src/shield.gif" alt="">
            <img src="./src/port.gif" alt="">
          </div>
          <div>
            <span class="fs-strong">Gain</span>
            <span>as many</span>
            <em>points</em>
            <span>as possible!</span>
          </div>
          <button id="tutorial_start_btn">Start</button>
        </div>
        <!-- Get Ready -->
        <div id="get_ready">
          <div class="title">Get Ready!</div>
          <img src="./src/arrowkeys.png" alt="">
          <div>Use arrow keys to moves.</div>
        </div>
        <!-- Actual Game -->
        <div id="actual_game">
          <div class="asteroidSection">
              <div class="curAstroid"></div>
          </div>
          <div class="portSection">
              <div class="curPort"></div>
          </div>
          <div class="shieldSection">
            <div class="curShield"> </div>
          </div>
          <div id="rocket_wrap">
            <div id="rocket"></div>
          </div>
          <div id="game_right_section">
              <div id="scoreword">
                  SCORE
                  <div id="score_num">0</div>
              </div>
              <div id="danger">DANGER
              <div id="danger_num">20</div></div>
              <div id="level">LEVEL
              <div id="level_num">1</div></div>
          </div>
        </div>
      </div> <!-- end game-window -->
  </div> <!-- end outer-container -->
</body>

</html>
